<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">

    <div class="main-box">
        <ol class="breadcrumb crumbs">
            <li class="active">车辆管理</li>
        </ol>

        <div class="search-bar">
            <input type="text" placeholder="输入车牌号查询" id="searchBox">
            <a href="${base}/admin/car/edit" class="btn btn-default btn-in-input">
                <span class="glyphicon glyphicon-plus"></span>
            </a>
        </div>
        <div style="padding: 10px">
            <table id="table"></table>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        $('#searchBox').keypress(function (event) {
            if (event.keyCode === 13) {
                if (event.keyCode === 13) {
                    var searchValue = $(this).val();
                    dataTable.bootstrapTable("refresh", {
                        query: {
                            carNumber: searchValue
                        }
                    })

                }
            }
        });
        var dataTable = $('#table');
        dataTable.bootstrapTable({
            pagination: true,
            url: API_CAR + '/page',
            ajaxOptions: {
                headers: {
                    access_token: getToken()
                },
                success: function (data) {
                    console.info(data);
                },
                error: function (jqXHR) {
                    if (jqXHR.status === 403) {
                        location.href = '/';
                    } else {
                        bootbox.alert(jqXHR.responseJSON.message);
                    }
                }
            },
            responseHandler: function (res) {
                return {
                    "total": res.total,
                    "rows": res.list
                };
            },
            sidePagination: 'server',
            columns: [
                {field: 'id', title: 'ID', visible: false},
                {
                    field: 'carNumber', title: '车牌号', width: 150, formatter: function (value, row) {
                        return '<a href="' + $('#base').val() + '/admin/car/' + row.id + '">' + value + '</a>';
                    }
                },
                {
                    field: 'type', title: '车型', width: 150, align: 'center', formatter: function (value, row) {
                        return showCarTypeName(value);
                    }
                },
                {
                    field: 'boxType', title: '车厢类型', width: 150, align: 'center', formatter: function (value, row) {
                        return showCarBoxTypeName(value);
                    }
                },
                {field: 'maxLoad', title: '载重/T', width: 80, align: 'center'},
                {field: 'boxLong', title: '车板长/m', width: 80, align: 'center'},
                {field: 'boxWidth', title: '车板宽/m', width: 80, align: 'center'},
                {field: 'boxHigh', title: '离地高/m', width: 80, align: 'center'},
                {field: 'address', title: '车辆位置'}
            ]
        });
    })
</script>